// 【第一步：创建模型】
var scene3 = new THREE.Scene(); //  创建场景对象Scene
var geometry3 = new THREE.BoxGeometry(50, 50, 50); //创建一个立方几何体
// 遍历几何体的face属性,设置三角面face三个顶点的颜色
geometry3.faces.forEach(face => {
    face.vertexColors = [
        new THREE.Color(0xffff00),
        new THREE.Color(0xff00ff),
        new THREE.Color(0x00ffff),
    ]
});
var material = new THREE.MeshLambertMaterial({ //创建材质
    vertexColors: THREE.FaceColors,
});
var mesh3 = new THREE.Mesh(geometry3, material); //网格模型对象Mesh（模型，材质）
var axisHelper = new THREE.AxisHelper(250); // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
scene3.add(axisHelper); //场景中加入辅助线
scene3.add(mesh3); //将模型添加到场景中



// 【第三步：光源设置】
var point = new THREE.PointLight(0xffffff); //设置点光源
point.position.set(400, 200, 300); //点光源位置
scene3.add(point); //点光源添加到场景中

// 【第三步：相机设置】
var width = document.getElementById('can3').clientWidth; //容器宽
var height = document.getElementById('can3').clientHeight; //容器高
var k = width / height; //窗口宽高比
var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //创建相机对象
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene3.position); //设置相机方向(指向的场景对象)

// 【第四步：渲染对象】
var renderer3 = new THREE.WebGLRenderer();
renderer3.setSize(width, height); //设置渲染区域尺寸
renderer3.setClearColor(0xb9d3ff, 0.3); //设置背景颜色
document.getElementById('can3').appendChild(renderer3.domElement); //can1画布中插入canvas对象
renderer3.render(scene3, camera); //执行渲染操作（场景、相机）